<template>
	<view class="index">
		<view class="top">
			<view class="item">
				<view class="price">{{user.balance}}</view>
				<view class="name">余额</view>
			</view>
			<view class="item">
				<view class="price">{{user.integral}}</view>
				<view class="name">积分</view>
			</view>
			<view class="item">
				<view class="price">{{user.phone_balance}}</view>
				<view class="name">话费</view>
			</view>
			<view class="item">
				<view class="price">{{user.voucher_balance}}</view>
				<view class="name">优惠券</view>
			</view>
		</view>
		
		<!-- <view class="top">
			<view class="item">
				<view class="price">{{user.earnings_count}}</view>
				<view class="name">累计收益</view>
			</view>
			<view class="item">
				<view class="price">{{user.withdraw_count}}</view>
				<view class="name">已提现</view>
			</view>
			
			<view class="item">
				<view class="price">{{user.wait_rebate}}</view>
				<view class="name">待结算</view>
			</view>
		</view> -->
		
		<view class="uni-list">
			<view class="uni-list-cell">
				<navigator url="detail" class="uni-list-cell-navigate uni-navigate-right">
					资金明细
				</navigator>
			</view>
			<!-- <view class="uni-list-cell">
				<navigator url="rebate-record" class="uni-list-cell-navigate uni-navigate-right">
					返利明细
				</navigator>
			</view> -->
			<view class="uni-list-cell">
				<navigator url="rebate-record" class="uni-list-cell-navigate">
					话费有效期：{{phoneTime}}
				</navigator>
			</view>
		</view>
		
		<!-- <view class="radius-btn" @tap="showMask = true">充值</view> -->
		
		<navigator url="../recharge/recharge" class="radius-btn">充值</navigator>
		
		<navigator url="transfer" class="radius-btn transfer">转帐</navigator>
		
		
		
		<mask-select :show="showMask" @hidePopup="hideMask">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="select_type(item)" v-for="(item,index) in funds_type" :key="index">
					<view class="uni-list-cell-navigate">
						<view>{{item.name}}</view>
						<view class="select-icon">
							<image src="/static/icon/she.png"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
		
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import maskSelect from '../../components/mask-select.vue';
	
	
	export default {
		components: {
			maskSelect
		},
		data() {
			return {
				user:{
					balance:0,
					integral:0,
					phone_balance:0,
					voucher_balance:0
				},
				funds_type: [],
                showMask: false,
				phoneTime: ''
			};
		},
		onLoad(options) {
			this.phoneTime = options.phone_time;
			this.getDetail();
		},
		methods: {
			//获取详情
			getDetail: function(){
				
				var url =  'funds/index';
				var that = this;
				Request.send({
					url: url,
					sCallback: function(res) {
						that.user = res.data;
						that.funds_type = res.data.recharge_type;
					}
				})
			},
			//选择充值类型
			select_type: function(item){
				
				uni.navigateTo({
					url: '/pages/recharge/recharge?type='+item.type
				});
				this.hideMask();
			},
			hideMask() {
				this.showMask = false;
			}
		}
	}
</script>

<style>
	.index{
		font-size: 28upx;
	}
	
	.top{
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		background: #fff;
		padding: 40upx 0;
		color: #666;
	}
	
	.top .price{
		color: #E60012;
		margin-bottom: 10upx;
		font-weight: 600;
	}
	
	.top .item{
		flex: 1;
		text-align: center;
		border-left: 1upx solid #eee;
	}
	
	.top .item:nth-child(1) {
		border: none
	}
	
	.uni-list{
		margin: 20upx 0 40upx 0;
	}
	
	.select-icon image{
		height: 60upx;
		width: 60upx;
	}
	
	.mask-container .uni-list{
		margin: 0;
	}
	
	navigator.radius-btn{
		margin-top: 40upx;
	}
	
	.radius-btn.transfer{
		/* background: #007AFF; */
	}
</style>
